<script setup lang="ts">
import {onMounted, ref} from "vue";
import {type TableColumn, type TableData} from "@/components/type/table";

const emits = defineEmits(["getList","setSearchData"])

const props = defineProps({
  columns: {
    type: Array as () => TableColumn[],
    default: () => []
  },
  isShowSearch: {
    type: Boolean,
    default: false
  }
})
const form = ref({})
const searchData = function () {
  emits("setSearchData", form.value)
}
const resetData = function () {
  form.value = {}
  emits("setSearchData", {})
}
</script>

<template>
  <el-card body-style="padding: 10px;" shadow="never" v-show="props.isShowSearch">
    <el-form  :inline="true"  class="demo-form-inline">
      <el-form-item v-for="(item, index) in props.columns" :key="index">
        <template v-if="item.search?.type == 'input'">
          <el-input  class="customer-input"  :placeholder="item.search?.placeholder ?? ''" v-model="form[item.prop]"  />
        </template>
        <template v-if="item.search?.type == 'date'">
          <el-date-picker v-model="form[item.prop]" type="date" :placeholder="item.search?.placeholder ?? ''" size="small"
                          value-format="YYYY-MM-DD"/>
        </template>
        <template v-if="item.search?.type == 'select'">
          <el-select
              v-model="form[item.prop]"
              :placeholder="item.search?.placeholder ?? ''"
              size="small"
              style="width: 240px"
          >
            <el-option v-for="itemSelect in item.search?.optionData" :key="itemSelect.value" :label="itemSelect.label" :value="itemSelect.value"/>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
        <el-button @click="resetData">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.customer-input {
  width: 10rem;
}
.el-card__body {
  padding:10px !important;
}
.el-form--inline .el-form-item {
  margin-right: 10px;
  margin-bottom:5px
}
</style>